<template>
  <div class="content has-text-centered">
    <!--导航栏-->
    <div id="header_outer" style="z-index: 1000; position: fixed; width:100%">
      <div class="container">
        <div class="header_section">
          <div class="logo"><a href="javascript:void(0)">
            <!--<img src="../../static/img/uulogoyuan.png" height="50" width="50" alt=""/>-->
            <img src="../../static/img/1116152428.png" height="30" width="50"/></a></div>
          <nav class="nav" id="nav">
            <ul class="toggle">
              <li><a href="#top_content">Home</a></li>
              <li><a href="#service">Services</a></li>
              <li><a href="#work_outer">数据共享</a></li>
              <li><a href="#Portfolio">模型管理</a></li>
              <!--<li><a href="#client_outer">应用功能</a></li>-->
              <li><a href="#team">应用功能</a></li>
              <!--<li><a>登录</a></li>-->
            </ul>
            <ul class="">
              <li><a href="#top_content">Home</a></li>
              <li><a href="#service">Services</a></li>
              <li><a href="#work_outer">数据共享</a></li>
              <li><a href="#Portfolio">模型管理</a></li>
              <!--<li><a href="#client_outer">应用功能</a></li>-->
              <li><a href="#team">应用功能</a></li>
              <li><a @click="openLogin">登录</a></li>
            </ul>
          </nav>
          <a class="res-nav_click animated wobble wow"  href="javascript:void(0)"><i class="fa-bars"></i></a> </div>
      </div>
    </div>

    <!--Home-->
    <section id="top_content" class="top_cont_outer" style="height:561px">
      <div class="top_cont_inner" style="height:100%">
        <div class="container">
          <div class="top_content">
            <div class="row">
              <div class="col-lg-5 col-sm-7">
                <div class="top_left_cont flipInY wow animated">
                  <h3>Colourful &amp; sexy!</h3>
                  <h2>地理大数据时空解析原型系统</h2>
                  <p> Geospatial and Spacetime Analysis Prototype System for Big Data</p>
                  <a href="#service" class="learn_more2">了解更多</a> </div>
              </div>
              <div class="col-lg-7 col-sm-5"> </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--服务-->
    <section id="service">
      <div class="container">
        <h2>Services</h2>
        <div class="service_area">
          <div class="row" style="position: relative">
            <div class="col-lg-4">
              <div class="service_block">
                <div class="service_icon delay-03s animated wow  zoomIn" @click="toData"> <span><i class="fa fa-flash fa-2x"></i></span> </div>
                <h3 class="animated fadeInUp wow">数据共享</h3>
                <p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>
              </div>
            </div>
            <div class="col-lg-4">
              <div class="service_block">
                <div class="service_icon icon2  delay-03s animated wow zoomIn" @click="toModel"> <span><i class="fa fa-comments"></i></span> </div>
                <h3 class="animated fadeInUp wow">模型管理</h3>
                <p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>
              </div>
            </div>
            <div class="col-lg-4">
              <div class="service_block">
                <div class="service_icon icon3  delay-03s animated wow zoomIn" @click="toManage"> <span><i class="fa fa-shield"></i></span> </div>
                <h3 class="animated fadeInUp wow">应用功能</h3>
                <p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--数据探索-->
    <section id="work_outer"><!--main-section-start-->
      <div class="top_cont_latest">
        <div class="container">
          <h2>数据共享</h2>
          <div class="work_section">
            <div class="row" style="position: relative">
              <div class="col-lg-6 col-sm-6 wow fadeInLeft delay-05s">
                <div class="service-list">
                  <div class="service-list-col1"> <i class="icon-doc"></i> </div>
                  <div class="service-list-col2">
                    <h3>Process Walkthrough</h3>
                    <p>Proin iaculis purus digni consequat sem digni ssim. Donec entum digni ssim.</p>
                  </div>
                </div>
                <div class="service-list">
                  <div class="service-list-col1"> <i class="icon-comment"></i> </div>
                  <div class="service-list-col2">
                    <h3>24/7 support</h3>
                    <p>Proin iaculis purus consequat sem digni ssim. Digni ssim porttitora .</p>
                  </div>
                </div>
                <div class="service-list">
                  <div class="service-list-col1"> <i class="icon-database"></i> </div>
                  <div class="service-list-col2">
                    <h3>Hosting & Storage</h3>
                    <p>Proin iaculis purus consequat digni sem digni ssim. Purus donec porttitora entum.</p>
                  </div>
                </div>
                <div class="service-list">
                  <div class="service-list-col1"> <i class="icon-cog"></i> </div>
                  <div class="service-list-col2">
                    <h3>Customization options</h3>
                    <p>Proin iaculis purus consequat sem digni ssim. Sem porttitora entum.</p>
                  </div>
                </div>
                <div class="work_bottom">
                  <span>Ready to take the plunge?</span>
                  <a style="background:#f56eab;"  class="contact_btn" @click="toData">进入数据共享</a>
                  <!--href="#/dataSource/pubData"-->
                </div>
              </div>
              <figure class="col-lg-6 col-sm-6  text-right wow fadeInUp delay-02s"> </figure>
            </div>
          </div>
        </div>
        <!--<div class="work_pic"><img src="img/dashboard_pic.png" alt=""></div>-->
      </div>
    </section>
    <!--模型管理-->
    <section id="Portfolio" class="content">
      <!-- Container -->
      <div class="container portfolio-title">
        <!-- Section Title -->
        <div class="section-title">
          <h2>模型管理</h2>
        </div>
        <!--/Section Title -->
      </div>
      <!-- Container -->
      <div class="portfolio-top"></div>
      <!-- Portfolio Plus Filters -->
      <div class="portfolio">
        <!-- Portfolio Filters -->
        <!--<div id="filters" class="sixteen columns">-->
          <!--<ul class="clearfix">-->
            <!--<li><a id="all" href="#" data-filter="*" class="active">-->
              <!--<h5>All</h5>-->
            <!--</a></li>-->
            <!--<li><a class="" href="#" data-filter=".branding">-->
              <!--<h5>Branding</h5>-->
            <!--</a></li>-->
            <!--<li><a class="" href="#" data-filter=".design">-->
              <!--<h5>Design</h5>-->
            <!--</a></li>-->
            <!--<li><a class="" href="#" data-filter=".photography">-->
              <!--<h5>Photography</h5>-->
            <!--</a></li>-->
            <!--<li><a class="" href="#" data-filter=".videography">-->
              <!--<h5>Videography</h5>-->
            <!--</a></li>-->
            <!--<li><a class="" href="#" data-filter=".web">-->
              <!--<h5>Web</h5>-->
            <!--</a></li>-->
          <!--</ul>-->
        <!--</div>-->
        <!--/Portfolio Filters -->

        <!-- Portfolio Wrap -->
        <div class="isotope" style="position: relative; overflow: hidden; height: 480px;" id="portfolio-wrap">
          <!-- Portfolio Item With PrettyPhoto  -->
          <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four   videography isotope-item">
            <a style="margin-left: 60px;margin-top: 80px;background:#7cc576;" class="contact_btn" @click="toModel">进入模型管理</a>
            <!--href="#/project/allProject"-->
            <!--<div class="portfolio-image"> <img src="../../static/img/portfolio_pic1.jpg"  alt="Portfolio 1"></div>-->
            <!--<a title="Starbucks Coffee" rel="prettyPhoto[galname]" href="http://clapat.ro/themes/newave/images/portfolio/portfolio2.jpg">-->
              <!--<div class="project-overlay">-->
                <!--<div class="project-info">-->
                  <!--<div class="zoom-icon"></div>-->
                  <!--<h4 class="project-name">Leica Camera</h4>-->
                  <!--<p class="project-categories">Videography</p>-->
                <!--</div>-->
              <!--</div>-->
            <!--</a> -->
          </div>
          <!--/Portfolio Item With PrettyPhoto  -->

          <!-- Portfolio Item Video Expander  -->
          <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(337px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/portfolio_pic2.jpg" alt="Portfolio 1"> </div>
            <div class="project-overlay">
              <div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-video-expander.html" title="Open Project"></a> </div>
              <div class="project-info">
                <div class="zoom-icon"></div>
                <h4 class="project-name">Foto Template</h4>
                <p class="project-categories">Design</p>
              </div>
            </div>
          </div>
          <!--/Portfolio Item Video Expander  -->

          <!-- Portfolio Item Normal Expander -->
          <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(674px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design  isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/portfolio_pic3.jpg" alt="Portfolio 1"> </div>
            <div class="project-overlay">
              <div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-normal-expander-1.html" title="Open Project"></a> </div>
              <div class="project-info">
                <div class="zoom-icon"></div>
                <h4 class="project-name">Sony Phone</h4>
                <p class="project-categories">Design</p>
              </div>
            </div>
          </div>
          <!--/Portfolio Item Normal Expander -->

          <!-- Portfolio Item FullScreen Expander -->
          <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(1011px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  photography  branding web isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/portfolio_pic4.jpg" alt="Portfolio 1"> </div>
            <div class="project-overlay">
              <div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-fullscreen-expander-1.html" title="Open Project"></a> </div>
              <div class="project-info">
                <div class="zoom-icon"></div>
                <h4 class="project-name">Nike Shoes</h4>
                <p class="project-categories">Photography, Web, Branding</p>
              </div>
            </div>
          </div>
          <!-- Portfolio Item FullScreen Expander -->

          <!-- Portfolio Item FullScreen Expander -->
          <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/portfolio_pic5.jpg" alt="Portfolio 1"> </div>
            <div class="project-overlay">
              <div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-fullscreen-expander-2.html" title="Open Project"></a> </div>
              <div class="project-info">
                <div class="zoom-icon"></div>
                <h4 class="project-name">Vinyl Record</h4>
                <p class="project-categories">Design</p>
              </div>
            </div>
          </div>
          <!--/Portfolio Item FullScreen Expander -->

          <!-- Portfolio Item Normal Expander -->
          <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(337px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  web isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/portfolio_pic6.jpg" alt="Portfolio 1"> </div>
            <div class="project-overlay">
              <div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-normal-expander-2.html" title="Open Project"></a> </div>
              <div class="project-info">
                <div class="zoom-icon"></div>
                <h4 class="project-name">iPhone</h4>
                <p class="project-categories">Web</p>
              </div>
            </div>
          </div>
          <!--/Portfolio Item Normal Expander -->

          <!-- Portfolio Item External Project  -->
          <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(674px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design web isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/portfolio_pic7.jpg" alt="Portfolio 1"> </div>
            <a href="http://clapat.ro/themes/newave/project-external-1.html" class="external">
              <div class="project-overlay">
                <div class="project-info">
                  <div class="zoom-icon"></div>
                  <h4 class="project-name">Nexus Phone</h4>
                  <p class="project-categories">Design, Web</p>
                </div>
              </div>
            </a> </div>
          <!--/Portfolio Item External Project  -->

          <!-- Portfolio Item With PrettyPhoto  -->
          <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(1011px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four   photography isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/portfolio_pic8.jpg" alt="Portfolio 1"> </div>
            <a title="Stereo Headphones" rel="prettyPhoto[galname]" href="http://clapat.ro/themes/newave/images/portfolio/portfolio8.jpg">
              <div class="project-overlay">
                <div class="project-info">
                  <div class="zoom-icon"></div>
                  <h4 class="project-name">Art Frame</h4>
                  <p class="project-categories">Photography</p>
                </div>
              </div>
            </a> </div>
          <!--/Portfolio Item With PrettyPhoto  -->
        </div>
        <!--/Portfolio Wrap -->
      </div>
      <!--/Portfolio Plus Filters -->
      <div class="portfolio-bottom"></div>
      <!-- Project Page Holder-->
      <div id="project-page-holder">
        <div class="clear"></div>
        <div id="project-page-data"></div>
      </div>
      <!--/Project Page Holder-->
    </section>
    <!--应用-->
    <section class="main-section team" id="team"><!--main-section team-start-->
      <div class="container">
        <h2 >应用功能</h2>
        <h6>Take a closer look into our amazing team. We won’t bite.</h6>
        <div class="team-leader-block clearfix">
          <div class="team-leader-box">
            <div class="team-leader wow fadeInDown delay-03s">
              <div class="team-leader-shadow"><a href="javascript:void(0)"></a></div>
              <img src="../../static/img/portfolio_pic1.jpg" alt="">
              <ul>
                <li><a href="javascript:void(0)" class="fa-twitter"></a></li>
                <li><a href="javascript:void(0)" class="fa-facebook"></a></li>
                <li><a href="javascript:void(0)" class="fa-pinterest"></a></li>
                <li><a href="javascript:void(0)" class="fa-google-plus"></a></li>
              </ul>
            </div>
            <h3 class="wow fadeInDown delay-03s">Walter White</h3>
            <span class="wow fadeInDown delay-03s">Chief Executive Officer</span>
            <a style="margin-left: 60px;margin-top: 40px;background:#49b5e7;"  class="contact_btn" @click="toManage">进入应用功能</a>
            <!--href="#/appManagement/dataExplorerM"-->
            <!--<p class="wow fadeInDown delay-03s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>-->
          </div>
          <div class="team-leader-box">
            <div class="team-leader  wow fadeInDown delay-06s">
              <div class="team-leader-shadow"><a href="javascript:void(0)"></a></div>
              <img src="../../static/img/portfolio_pic1.jpg" alt="">
              <ul>
                <li><a href="javascript:void(0)" class="fa-twitter"></a></li>
                <li><a href="javascript:void(0)" class="fa-facebook"></a></li>
                <li><a href="javascript:void(0)" class="fa-pinterest"></a></li>
                <li><a href="javascript:void(0)" class="fa-google-plus"></a></li>
              </ul>
            </div>
            <h3 class="wow fadeInDown delay-06s">Jesse Pinkman</h3>
            <span class="wow fadeInDown delay-06s">Product Manager</span>
            <p class="wow fadeInDown delay-06s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>
          </div>
          <div class="team-leader-box">
            <div class="team-leader wow fadeInDown delay-09s">
              <div class="team-leader-shadow"><a href="javascript:void(0)"></a></div>
              <img src="../../static/img/portfolio_pic1.jpg" alt="">
              <ul>
                <li><a href="javascript:void(0)" class="fa-twitter"></a></li>
                <li><a href="javascript:void(0)" class="fa-facebook"></a></li>
                <li><a href="javascript:void(0)" class="fa-pinterest"></a></li>
                <li><a href="javascript:void(0)" class="fa-google-plus"></a></li>
              </ul>
            </div>
            <h3 class="wow fadeInDown delay-09s">Skyler white</h3>
            <span class="wow fadeInDown delay-09s">Accountant</span>
            <p class="wow fadeInDown delay-09s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>
          </div>
        </div>

      </div>
    </section>

    <!--<h2 class="is-title is-bold">地理大数据时空解析原型系统</h2>-->
    <!--<div class="columns is-vcentered">-->
      <!--<div class="column is-6 is-offset-3">-->
        <!--<div class="box">-->
          <!--<div v-show="error" style="color:red; word-wrap:break-word;">{{ error }}</div>-->
          <!--<form v-on:submit.prevent="login">-->
            <!--<label class="label">用户</label>-->
            <!--<p class="control">-->
              <!--<input v-model="data.body.username" class="input" type="text" placeholder="email@example.org">-->
            <!--</p>-->
            <!--<label class="label">密码</label>-->
            <!--<p class="control">-->
              <!--<input v-model="data.body.password" class="input" type="password" placeholder="password">-->
            <!--</p>-->

            <!--<p class="control">-->
              <!--<el-checkbox v-model="data.rememberMe" @change="onChangeRememberMe">记住我</el-checkbox>-->
            <!--</p>-->

            <!--<hr>-->
            <!--<p class="control">-->
              <!--<button type="submit" class="button is-primary" @click="login()">登录</button>-->
              <!--<button class="button is-default">取消</button>-->
            <!--</p>-->
          <!--</form>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
      <!--<ceiling style="display:none;margin-left:10px;width: 80%;" ref="openLog"></ceiling>-->
    <div>
      <user-dialog :dialogVisible="dialogVisible"></user-dialog>
    </div>
  </div>
</template>

<script>
  import auth from "../auth/auth"
  import ceiling from './layout/ceiling.vue'
  import userDialog from "../components/dialog/userDialog";

  export default {
    components: {
        "ceiling":ceiling,
        "user-dialog": userDialog
    },
      // props:{
      //     dialogVisible: Object,
      // },
    data () {
      return {
          dialogVisible: {
            v: false,
            clickModalClose: false
        },
        data: {
          body: {
            username: 'admin',
            password: 'admin'
          },
          rememberMe: false,
        },
        // error: null
      }
    },
    mounted () {
      // window.location.reload();
      if (localStorage.getItem('rememberMe') === 'true') {
        this.$set(this.data, 'rememberMe', true)
      }
      // Can set query parameter here for auth redirect or just do it silently in login redirect.
    },
      created(){
          // location.reload();
      },
    methods: {
        // openDatapage(){
        //     window.open(window.location.origin+'/#/dataSource/pubData');
        // },
        // openProjectpage(){
        //     window.open(window.location.origin+'/#/project/allProject');
        // },
        // openManagepage(){
        //     window.open(window.location.origin+'/#/appManagement/dataExplorerM');
        // },
        openLogin(){
            // this.$refs.openLog.userLogin();
            //  this.dialogVisible.v = true;
            this.$Bus.$emit('dialogVisible.v',true);
        },
        login () {
          var info = {
            username: this.data.body.username,
            password: this.data.body.password
          }
          auth.login(this, info)
        },
        // TODO: implement the function of 'rememberme'
        onChangeRememberMe(rememberMe){
          console.log(this.data.rememberMe);
        },
        toData(){
            // this.$router.replace("/dataSource/pubData");
            window.open(window.location.origin+'/#/dataSource/pubData');
        },
        toModel(){
            window.open(window.location.origin+'/#/project/allProject');
        },
        toManage(){
            window.open(window.location.origin+'/#/appManagement/dataExplorerM');
        },
    }
  }
</script>

<style lang="less" scoped>
  @import "../style/login.css";

  .is-title {
    text-transform: capitalize;
  }
  .service_icon:hover{
    cursor:pointer;
  }

</style>